<template>
  <div>
    <Header :title="title"></Header>
    <van-row class="aui-bg-f aui-padded-10 aui-border-b aui-padded-b-0">
        <van-col span="8" class="aui-padded-l-10 aui-padded-r-10 aui-padded-b-15" v-for="(item, index) in items" :key="index" @click="fnChangeItem(index, item.id)" v-cloak>
            <div class="aui-btn aui-btn-block aui-btn-outlined aui-btn-sm aui-bg-f" :class="{'aui-btn-danger': index == cur}" v-text="item.name"></div>
        </van-col>
    </van-row>
    <div class="content aui-bg-f">
        <div class="list-cont aui-padded-15" v-for="(item, index) in content" :key="index">
            <div v-text="item.title"></div>
            <div style="font-size:16px; color:#777777; margin-top:10px; line-height:25px" v-html="item.content"></div>
        </div>
    </div>
  </div>
</template>

<script>
  import Header from '../components/header.vue'
  import Index from '../../service/index.js'
  export default {
    data() {
      return {
        title: '帮助中心',
        cur: 0,
        items:　[],
        content: []
      }
    },
    components: {
      Header
    },
    mounted () {
      this.init()
    },
    methods: {
      init: function() {
          this.fnGetTabData()
      },
      fnGetTabData: function() {
        Index.fnGetHelpType().then(ret => {
          if (ret && ret.status) {
              this.items = ret.data;
              this.fnGetContentData(this.items[0].id)
          }
        })
      },
      fnGetContentData: function(id) {
        Index.fnGetHelpData({type: id}).then(ret => {
          if (ret) {
              this.content = ret.data
          }
        })
      },
      fnChangeItem: function(index, id) {
          this.cur = index;
          this.fnGetContentData(id);
      }
    }
  }
</script>

<style>
</style>
